<style scoped lang="less">
</style>
<template>
  <div class="open-room">
    <div>
      <Upload
        ref="upload"
        multiple
        type="drag"
        :on-success="fileUpdateSuccess"
        :before-upload="beforeUpload"
        action="http://localhost:8081/api/sys/file/upload-file"
        :default-file-list="defaultFileList"
        :on-remove="handleRemove"
      >
        <div style="padding: 20px 0">
          <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
          <p>点击或拖曳文件到此处上传</p>
        </div>
      </Upload>
      <!-- <Button @click="test">点击测试</Button> -->
    </div>
  </div>
</template>
<script>
import { getToken } from '@/libs/util'
import Vue from 'vue'

export default {
  data () {
    return {
      roomForm: {},
      defaultFileList: [],
      uploadList: []
    }
  },
  methods: {
    test () {
      this.defaultFileList
      let ids = this.getUpdateFileList()
      debugger
      this.clearFiles()
      let ids2 = this.getUpdateFileList()
    },

    // 移除文件
    handleRemove (file) {
      const fileList = this.$refs.upload.fileList
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1)
      this.deleteFile()
    },

    // 文件上传前
    beforeUpload (file) {
    },

    // 文件上传成功
    fileUpdateSuccess (res, file, fileList) {
      if (res.code === 200) {
        let myData = res.records
        file.tid = myData.tid
        file.name = myData.name
        file.url = myData.path
      } else {
        this.$Message.error(file.name + '上传失败')
      }
    },

    // 获取上传文件列表的值  父组件模态框调用
    getUpdateFileIds () {
      let fileIds = []
      this.$refs.upload.fileList.forEach(file => {
        fileIds.push(file.tid)
      })
      return fileIds
    },

    // 删除文件
    deleteFile (fileId) {
      this.$httpUtil.asyncDelete('sys/file/delete', { id: fileId }, res => {
        if (res.data.code === 200) {
          this.$Message.success(res.data.msg)
        }
      })
    },

    // 清空方法 父组件 模态框调用
    clearFiles () {
      this.$refs.upload.clearFiles()
    },

    // 初始化方法
    init () {
      this.uploadList = this.$refs.upload.fileList
    }
  },
  computed: {},
  mounted () {
    this.init()
  },
  watch: {}
}
</script>
